<template>
	<div class="container">
		<!-- 头部区域 -->
		<div class="header">
			<div class="user-info">
				<!-- 头像图片 -->
				<img :src="icons.avatar" class="icon avatar" alt="头像" v-if="icons.avatar">
				<div class="login-section">
					<div class="click-login" @click="login" v-if="!userInfo">{{loginText}}</div>
					<div class="username" v-else>{{userInfo.username}}</div>
					<div class="greeting">你好，环保达人~</div>
				</div>
			</div>
		</div>

		<!-- 数据统计 -->
		<div class="stats-grid">
			<div class="stat-item" v-for="(stat, index) in stats" :key="index">
				<div class="value">0</div>
				<div class="label">{{ stat.label }}</div>
			</div>
		</div>

		<!-- 积分模块 -->
		<div class="points-container">
			<div class="points-title">环保积分</div>
			<div class="points-value">500</div>
			<button class="points-button" @click="goToMall">去兑换</button>
		</div>


		<!-- 导航菜单 -->
		<div class="nav-list">
			<div class="nav-item" v-for="(item, index) in navItems" :key="index" @click="handleNavClick(item)">
				<div class="nav-content">
					<img :src="icons[item.iconKey]" class="icon nav-icon" v-if="item.iconKey">
					<span>{{ item.label }}</span>
				</div>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted  
	} from 'vue'
	import avatarImg from '@/static/images/logo.png';
	import addressImg from '@/static/icons/address.png';
	import faqImg from '@/static/icons/problem.png';
	import serviceImg from '@/static/icons/service.png';
	import logoutImg from '@/static/icons/logOut.png';

	const icons = reactive({
		avatar: avatarImg,
		address: addressImg,
		faq: faqImg,
		service: serviceImg,
		logout: logoutImg,
	})
	const stats = reactive([{
			label: '投递次数'
		},
		{
			label: '重量（kg）'
		},
		{
			label: '加入（天）'
		}
	])
	const navItems = reactive([{
			label: '我的地址',
			iconKey: 'address',
		},
		{
			label: '常见问题',
			iconKey: 'faq',
		},
		{
			label: '客服中心',
			iconKey: 'service',
		},
		{
			label: '退出登录',
			iconKey: 'logout',
		}
	])

	// 登录后用户名改变
	const loginText = ref('点击登录')
	const userInfo = ref(null)

	// 加载时检查本地存储
	onMounted(() => {
		loadUserInfo()
		// 监听登录成功事件
		uni.$on('userLoggedIn', (user) => {
			userInfo.value = user
		})
	})

	// 组件卸载时移除监听
	onUnmounted(() => {
		uni.$off('userLoggedIn')
	})

	// 加载用户信息
	const loadUserInfo = () => {
		const storedUserInfo = uni.getStorageSync('userInfo')
		if (storedUserInfo) {
			userInfo.value = storedUserInfo
		}
	}

	const login = () => {
		console.log('跳转目标路径:', '/pages/login/login'); // 确认路径
		uni.navigateTo({
			url: '/pages/login/login',
			success: () => console.log('跳转成功'),
			fail: (err) => console.error('跳转失败:', err)
		});
	}
</script>

<style scoped lang="scss">
	.container {
		max-width: 375px;
		margin: 0 auto;
		padding: 20px;
		min-height: 100vh;
		background: #f8f8f8;
		position: relative;
		padding-bottom: 60px;
	}

	.header {
		margin-bottom: 30px;
	}

	.user-info {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.icon {
		display: block;
		object-fit: contain;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.login-section {
		flex: 1;
	}

	.click-login {
		font-size: 22px;
		color: #07c160;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.username {
		font-size: 22px;
		color: #07c160;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.greeting {
		font-size: 14px;
		color: #666;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background: white;
		padding: 20px;
		border-radius: 12px;
		margin-bottom: 20px;
	}

	.stat-item {
		text-align: center;
	}

	.value {
		font-size: 25px;
		color: #333;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.label {
		font-size: 16px;
		color: #999;
	}

	.points-container {
		background: #ffffff;
		border-radius: 8px;
		padding: 16px;
		margin: 20px 0;
	}

	.points-title {
		text-align: center;
		font-size: 18px;
		color: #666666;
		margin-bottom: 8px;
	}

	.points-value {
		text-align: center;
		font-size: 28px;
		color: #333;
		font-weight: bold;
		margin: 12px 0;
	}

	.points-button {
		background: white;
		color: #333;
		border: #a7a7a7 solid 1px;
		padding: 8px 10px;
		border-radius: 20px;
		font-size: 16px;
		box-shadow: 0 2px 4px rgba(7, 193, 96, 0.2);
	}

	.nav-list {
		background: white;
		border-radius: 12px;
		padding: 0 15px;
	}

	.nav-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 0;
		border-bottom: 1px solid #eee;
	}

	.nav-content {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.nav-item:last-child {
		border-bottom: none;
	}

	.nav-icon {
		width: 30px;
		height: 30px;
	}
</style>